<template>
  <div class="layui-layout layui-layout-admin zlgj-page" >

    <div class="adminnav2">
     <Secondnav urlname="shoptj"></Secondnav>
    </div>
    <div class="viewport01"></div>
      <div class="layui-body kedou-admin" id="LAY_app_body">
        <div class="layui-fluid">
          <div class="layui-row layui-col-space15">
             <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                  <div class="layui-card-header"> 入驻店铺数</div>
                  <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{{itemData.shopNumber.shopTotal}}</p>
                  </div>
                </div>
              </div>
              <div class="layui-col-sm6 layui-col-md3">
                 <div class="layui-card">
                   <div class="layui-card-header"> 消费总人数</div>
                   <div class="layui-card-body layuiadmin-card-list">
                     <p class="layuiadmin-big-font">{{itemData.shopNumber.consumptionTotal}}</p>
                   </div>
                 </div>
               </div>
               <div class="layui-col-sm6 layui-col-md3">
                  <div class="layui-card">
                    <div class="layui-card-header">入驻空置率</div>
                    <div class="layui-card-body layuiadmin-card-list">
                      <p class="layuiadmin-big-font">{{itemData.shopNumber.rate}}%</p>
                    </div>
                  </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                   <div class="layui-card">
                     <div class="layui-card-header">待审核店铺数</div>
                     <div class="layui-card-body layuiadmin-card-list">
                       <p class="layuiadmin-big-font">{{itemData.shopNumber.counts}}</p>
                     </div>
                   </div>
                </div>
          </div>
        </div>
        <div class="layui-fluid" style="margin-top:-15px;">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">入驻店铺所属行业</div>
                <div class="layui-card-body">
                  <div id="stb01" class="kehutb"></div>
                </div>
              </div>
            </div>
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">入驻店铺类型</div>
                <div class="layui-card-body">
                  <div id="stb02" class="kehutb"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
				<div class="layui-fluid" style="margin-top:-15px;">
					<div class="layui-card">
            <div class="layui-card-header">入驻店铺统计</div>
            <div class="layui-card-body">
              <div id="stb03" class="kehutb"></div>
            </div>
          </div>
				</div>
  		</div>	　
  </div>
</template>
<script>
  import echarts from 'echarts'
  import Pagetop from '../common/pagetop.vue'
  import Secondnav from '../common/zlgjsecondnav.vue'
export default {
  name: 'kehu',
  components: {Pagetop,Secondnav},
  data () {
    return {
      itemData:{shopNumber:''}
    }
  },
  mounted(){
    this.getdate();

  },
  methods: {
    getdate:function(){
    	var url='/salesreport/aapi/v1.9/pedestrian-street/store/system';
    	var _this=this;
    	ajaxRequest(url,'GET','json','',function(ret,err){
    		_this.itemData=ret.data;
        _this.getstb01();
      	_this.getstb02();
      	_this.getstb03();
    	})

    },
    getstb01:function(){
      var res=this.itemData.tradeShops;
      var arr1=[]
      var arr2=[];
      for(var i=0;i<res.length;i++){
        var obj={};
        obj.name=res[i].name;
        obj.value=res[i].rate
        arr1.push(obj)
        arr2.push(res[i].name)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
              orient: 'horizontal',
              left: 10,
              textStyle:{
                  color:"#b0c5e4"
              },
              data: arr2
          },

          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '60%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },

                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  itemStyle:{
								        normal:{
								           label:{
								              show: true,
								              formatter: '{b} : {c} ({d}%)'
								           },
								           labelLine :{show:true},
								           color:function(params) {
                            var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                ];
                                return colorList[params.dataIndex]
                             }
								        }
								  },
                  data:arr1,
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('stb01'))
      myChart.setOption(option);
    },
    getstb02:function(){
      var res=this.itemData.typeShops;
      var arr1=[]
      var arr2=[];
      for(var i=0;i<res.length;i++){
        var obj={};
        obj.name=res[i].name;
        obj.value=res[i].rate
        arr1.push(obj)
        arr2.push(res[i].name)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
              orient: 'horizontal',
              left: 10,
              textStyle:{
                  color:"#b0c5e4"
              },
              data: arr2
          },

          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '60%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },

                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  itemStyle:{
								        normal:{
								        	 label:{
								              show: true,
								              formatter: '{b} : {c} ({d}%)'
								           },
								           labelLine :{show:true},
								           color:function(params) {
                            var colorList = [
                                    '#00FFFF', '#ffffff',
                                ];
                                return colorList[params.dataIndex]
                             }
								        }
								  },
                  data:arr1,
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('stb02'))
      myChart.setOption(option);
    },
    getstb03:function(){
      var res=this.itemData.enterShops;
      var arr1=[]
      var arr2=[];
      for(var i=0;i<res.length;i++){
      	arr1.push(res[i].time)
      	arr2.push(res[i].counts)
      }
    	var option={
        backgroundColor:'rgba(255, 255, 255, 0)',
				xAxis:{
					type: "category",
					boundaryGap: !1,
					data:arr1,
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
				},
				yAxis: {
					type: "value",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
				},
				series: [{
					name: "销售额",
					type: "line",
					smooth: !0,
					itemStyle: {
						normal: {
							areaStyle: {
								type: "default"
							}
						}
					},
					data: arr2
				}]
			}
      var myChart = echarts.init(document.getElementById('stb03'))
      myChart.setOption(option);
    }
  },
  updated:function(){

  },
}
</script>
<style>
   @import '../../../static/other/css/zlgj/index.css'
</style>
